<template>
  <div>
    <h3>时间选择器</h3>
    <!--  placeholder="请选择时间"-->
    <el-time-select v-model="startVal" placeholder="请选择开始时间" :picker-options="{
      start:'9:00',
      end:'16:30',
      step:'00:15'
    }"></el-time-select>
    <el-time-select v-model="endVal" placeholder="请选择开始时间" :picker-options="{
      start:'9:00',
      end:'16:30',
      step:'00:15',
    minTime:startVal
    }"></el-time-select>
    <!-- :picker-options="{
          selectableRange:'9:00:00-16:00:00'
        }" -->
    <el-time-picker v-model="pickerVal" placeholder="请选择任意时间点" arrow-control is-range start-placeholder="请输入开始时间"
      end-placeholder="请输入结束时间" range-separator="--"></el-time-picker>

    <h3>日期选择器</h3>
    <!-- format="yyyy年第W周"
    type="dates" 选择多个日期
    dateRange 时间范围-->
    <el-date-picker
    v-model="dateVal"
     placeholder="请选择日期"
     type="daterange"
     :picker-options="pickerOptions"
     range-separator="--"
     start-placeholder="开始时间"
     end-placeholder="结束时间"
     unlink-panels
     ></el-date-picker>
     <span>{{dateVal}}</span>
     <h3>上传</h3>
     <h3>评分</h3>
     <h3>颜色选择器</h3>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions:{
          disabledDate(time){
            return time.getTime()>Date.now();
          },
          shortcuts:[{
            text:'今天',
            onClick(picker){
               picker.$emit('pick',[new Date(),new Date()]);
            }
          },{
            text:'一周前',
            onClick(picker){
               picker.$emit('pick',[new Date()-24*60*60*1000*7,new Date()]);
            }
          },{
            text:'30天前',
            onClick(picker){
               picker.$emit('pick',[new Date()-24*60*60*1000*30,new Date()]);
            }
          }]
        },
        dateVal:'',
        startVal: '',
        endVal: '',
        pickerVal: '',
        timeVal: ''
      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style>
</style>
